<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <el-button type="primary" @click="seachFunc" style="width: 80px" v-preventReClick>{{$t('ref')}}</el-button>
            <el-button type="warning" @click="addAct" v-preventReClick>{{$t('addfirgrdmen')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="funcId" :data="funTab" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="funcName" :label="$t('fun')" min-width="248">
                </el-table-column>
                <el-table-column prop="funcType" :label="$t('funtyps')" min-width="99">
                </el-table-column>
                <el-table-column prop="funcValue" :label="$t('perval')" min-width="246">
                </el-table-column>
                <el-table-column prop="funcPath" :label="$t('rote')" min-width="246">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="140" fixed="right">
                    <template slot-scope="scope">
                        <el-link v-if="scope.row.funcType!==$t('btn')" type="primary" @click="addMenu(scope.row)">{{$t('add')}}</el-link>
                        <el-link type="primary" @click="editAct(scope.row.funcId)">{{$t('mdfy')}}</el-link>
                        <el-link type="primary" @click="removeFun(scope.row.funcId)">{{$t('dlte')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
         <!-- 添加弹框 -->
        <el-dialog :title="$t('addsonmen')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addfunForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="addfunForm" :rules="addfunRules" :model="addfunForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('nam')" prop="funcName">
                    <el-input v-model.trim="addfunForm.funcName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('ennam')" prop="funcNameEn">
                    <el-input v-model="addfunForm.funcNameEn"></el-input>
                </el-form-item>
                <el-form-item :label="$t('perval')" prop="funcValue">
                    <el-input v-model.trim="addfunForm.funcValue"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rote')" prop="funcPath">
                    <el-input v-model.trim="addfunForm.funcPath"></el-input>
                </el-form-item>
                <el-form-item :label="$t('typ')" prop="funcType">
                    <el-select :disabled="tobe" v-model="addfunForm.funcType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('grd1')" value="stair"></el-option>
                        <el-option :label="$t('grd2')" value="seclevel"></el-option>
                        <el-option :label="$t('btn')" value="btn"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFunct(addfunForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 修改弹框 -->
        <el-dialog :title="$t('handlefun')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editfunForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="editfunForm" :rules="editfunRules" :model="editfunForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('nam')" prop="funcName">
                    <el-input v-model.trim="editfunForm.funcName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('ennam')" prop="funcNameEn">
                    <el-input v-model="editfunForm.funcNameEn"></el-input>
                </el-form-item>
                <el-form-item :label="$t('perval')" prop="funcValue">
                    <el-input v-model.trim="editfunForm.funcValue"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rote')" prop="funcPath">
                    <el-input v-model.trim="editfunForm.funcPath"></el-input>
                </el-form-item>
                <el-form-item :label="$t('typ')" prop="funcType">
                    <el-select :disabled="tobe" v-model="editfunForm.funcType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('grd1')" value="stair"></el-option>
                        <el-option :label="$t('grd2')" value="seclevel"></el-option>
                        <el-option :label="$t('btn')" value="btn"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editFunct(editfunForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    selfunlist,
    funlist,
    funadd,
    funeditdet,
    funedit,
    funremove
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            isOk: false,
            // 选择功能类型
            funVal: '',
            funTab: [],
            // addBox show oe hide
            addDialogVisible: false,
            // 添加表单
            addfunForm: {
                parentFuncId: 0,
                funcName: '',
                funcNameEn: '',
                funcPath: '',
                funcType: '',
                funcValue: ''
            },
            // 添加表单验证
            addfunRules: {
                funcName: [
                    { required: true, message: this.$t('namcanety'), trigger: 'blur' }
                ],
                funcNameEn: [
                    { required: true, message: this.$t('namcanety'), trigger: 'blur' }
                ],
                funcPath: [
                    { required: true, message: this.$t('pthcanety'), trigger: 'blur' }
                ],
                funcValue: [
                    { required: true, message: this.$t('pervalcanety'), trigger: 'blur' }
                ],
                funcType: [
                    { required: true, message: this.$t('typcanety'), trigger: 'blur' }
                ]
            },
            // 修改框 show or hide
            editDialogVisible: false,
            // 修改表单
            editfunForm: {},
            // 修改表单验证
            editfunRules: {
                funcName: [
                    { required: true, message: this.$t('namcanety'), trigger: 'blur' }
                ],
                funcNameEn: [
                    { required: true, message: this.$t('namcanety'), trigger: 'blur' }
                ],
                funcPath: [
                    { required: true, message: this.$t('pthcanety'), trigger: 'blur' }
                ],
                funcValue: [
                    { required: true, message: this.$t('pervalcanety'), trigger: 'blur' }
                ],
                funcType: [
                    { required: true, message: this.$t('typcanety'), trigger: 'blur' }
                ]
            },
            tobe: false
        }
    },
    methods: {
        // 查询功能
        seachFunc () {
            this.getFun()
        },
        // 获取功能列表
        getFun () {
            funlist().then(res => {
                this.funTab = res.data.data
                this.funTab.forEach(item => {
                    item.funcName = item.funcName
                    if (item.funcType === 'stair') {
                        item.funcType = this.$t('grd1')
                    }
                    item.children.forEach(key => {
                        key.funcName = key.funcName
                        if (key.funcType === 'seclevel') {
                            key.funcType = this.$t('grd2')
                        }
                        if (key.children) {
                            key.children.forEach(jojo => {
                                jojo.funcName = jojo.funcName
                                if (jojo.funcType === 'btn') {
                                    jojo.funcType = this.$t('btn')
                                }
                            })
                        }
                    })
                })
            })
        },
        // 展示添加框 level 1
        addAct () {
            this.addfunForm.funcType = 'stair'
            this.addDialogVisible = true
            this.addfunForm.parentFuncId = 100000
            this.tobe = true
        },
        // 添加菜单
        addFunct(form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                await funadd(JSON.stringify(this.addfunForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('funaddsuc'),
                            type: 'success'
                        })
                        this.getFun()
                        this.addDialogVisible = false
                        window.location.reload()
                    }
                })
            })
        },
        // 添加框关闭时重置表单
        addDialogVisibleClosed(form) {
            this.$refs[form].resetFields()
        },
        // 展示添加框 level 2
        addMenu (item) {
            if (item.funcType === this.$t('grd1')) this.addfunForm.funcType = 'seclevel'
            if (item.funcType === this.$t('grd2')) this.addfunForm.funcType = 'btn'
            this.addDialogVisible = true
            this.addfunForm.parentFuncId = item.funcId
            this.tobe = true
        },
        // 展示修改
        editAct (id) {
            this.editDialogVisible = true
            this.tobe = true
            funeditdet(id, JSON.stringify(id)).then(res => {
                this.editfunForm = res.data.data
            })
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        editFunct (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                await funedit(this.editfunForm.funcId, JSON.stringify(this.editfunForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('modfunsuc'),
                            type: 'success'
                        })
                        this.getFun()
                        this.editDialogVisible = false
                        window.location.reload()
                    }
                })
            })
        },
        // 删除功能
        removeFun (id) {
            this.$confirm(this.$t('dltcurfun'), this.$t('detfun'), {
                cancelButtonText: this.$t('cnl'),
                confirmButtonText: this.$t('cfm')
            }).then(async () => {
                await funremove(id, JSON.stringify(id)).then(res => {
                    if (res.data.code === '000000') {
                        this.getFun()
                        this.$message({
                            message: this.$t('dltfunsuc'),
                            type: 'success'
                        })
                        window.location.reload()
                    }
                })
            })
        }
    },
    mounted () {
        this.getFun()
    }
}
</script>

<style lang="less" scoped>
@import './funMgr.less';
</style>
